<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知乎注册界面</title>
    <link crossorigin="" rel="shortcut icon" type="image/x-icon" href="https://static.zhihu.com/heifetz/favicon.ico">
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        max-width: 1920px;
        min-width: 600px;
        height: 100%;
        background-image: url(https://static.zhihu.com/heifetz/assets/sign_bg.47eec442.png);
        background-repeat: no-repeat;
        background-color: #b8e5f8;
        position: relative;
    }

    .login-container {
        width: 400px;
        height: auto;
        border: 0.5px solid #ddd;
        background-color: white;
        border-radius: 4px;
        position: absolute;
        top: calc(50% - 507px / 2);
        left: calc(50% - 400px / 2);
        padding-top: 10px;
    }

    .login-box,
    .login-agreement,
    .login-social,
    .login-tip {
        width: 380px;
        margin: 0 auto;
    }

    .login-box {
        height: 220px;

    }

    .login-tabs {
        font-size: 0;
    }

    .login-tabs label {
        display: inline-block;
        width: 90px;
        height: 40px;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        position: relative;
    }

    .login-tabs label input[type=radio] {
        display: none;
    }

    .login-tabs label:hover {
        border-bottom: 4px solid #08f;
        font-weight: bold;
        cursor: pointer;
    }

    .login-tabs label:last-child {
        margin-left: 10px;

    }

    .login-tabs label div.login-account {
        position: absolute;
        width: 380px;
        /* 全部隐藏 */
        display: none;
        height: 200px;
        /* background-color: red; */
    }
    /* 输入框显示下边框 */
    .login-tabs label div.login-account div{
        width: 380px;
        height: 50px;
        border-bottom: 1px solid #eee;
        /* 增大输入框之间的间距 */
        margin-top: 15px;
    }

    /* 隐藏 button 的下边框 */
    .login-tabs label div.login-account div:last-child{
        border: none;
    }
    /* 输入框 */
    .login-tabs label div.login-account div input{
        width: 100%;
        height: 50px;
        /* 隐藏选中显示边框 */
        outline: none;
        /* 隐藏边框 */
        border: none;
    }
    /* 增大输入框提示文本 */
    .login-tabs label div.login-account div input::placeholder{
        font-size: 16px;
    }
    .login-tabs label div.login-account div input[type=submit]{
        font-size: 16px;
        background-color: #08f;
        color: #fff;
    }

    /* 显示选中的input 下的div */
    .login-tabs label input:checked+div {
        display: block;
    }

    .login-tabs label:first-child div {
        /* background-color: blue; */
    }

    .login-tabs label:last-child div {
        left: calc(0px - 90px - 10px);
    }

    .login-agreement,
    .login-social,
    .login-tip {
        height: calc(300px / 3);
    }

    .login-agreement {
        /* background-color: green; */
        overflow: hidden;
        border-bottom: 1px solid #eee;
    }

    .login-agreement p {
        margin-top: calc((100px - 34px) / 2);
        font-size: 14px;
        color: grey;
    }

    .login-social {
        /* background-color: blue; */
        position: relative;
    }

    .login-social .social-left,
    .login-social .social-right {
        height: 100%;
        line-height: calc(300px / 3);
        color: grey;
        position: absolute;

    }

    .login-social .social-left {
        width: 30%;
        left: 0;
    }

    .login-social .social-right {
        width: 60%;
        right: 0;
        text-align: right;
        letter-spacing: 2px;
    }

    svg {
        overflow: visible;
    }

    .login-tip {
        width: 400px;
        background-color: #eee;
        position: relative;
    }

    .login-tip .tip-left,
    .login-tip .tip-right {
        height: 100%;
        line-height: calc(300px / 3);
        color: #08f;
        position: absolute;
    }

    .login-tip .tip-left {
        width: 30%;
        left: 10PX;
    }

    .login-tip .tip-right {
        width: 70%;
        right: 10PX;
        text-align: right;
    }
</style>

<body>
    <div class="container">
        <div class="login-container">
            <div class="login-box">
                <div class="login-tabs">
                    <label>
                        验证码登录
                        <input type="radio" checked name="type">
                        <div class="login-account">
                            <div><input type="text" placeholder="请输入手机号" ></div>
                            <div><input type="text" placeholder="请输入短信验证码" ></div>
                            <div><input type="submit" value="注册/登录"></div>
                        </div>

                    </label>
                    <label>
                        密码登录
                        <input type="radio" name="type">
                        <div class="login-account">
                            <div><input type="text" placeholder="请输入手机号/邮箱" ></div>
                            <div><input type="password" placeholder="请输入密码" ></div>
                            <div><input type="submit" value="登录"></div>
                        </div>
                    </label>
                </div>

                <div class="login-options"></div>
            </div>
            <div class="login-agreement">
                <p>未注册手机验证后自动登录，注册即代表同意《知乎协议》《隐私保护指引》</p>
            </div>
            <div class="login-social">
                <div class="social-left">
                    社交账号登录
                </div>
                <div class="social-right">
                    <a>
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Wechat24">
                            <path fill="#07C160"
                                d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </a>
                    <a>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#50C8FD" class="ZDI ZDI--Qq24">
                            <path fill-rule="evenodd"
                                d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.483 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.288.687 6.288 0 0-.688-1.77-1.182-1.77-1.182 2.086-1.77 1.906-3.967 1.906-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.165-6.954-2.165-6.954V9.325C18.29 3.364 14.268 2 12.003 2Z"
                                clip-rule="evenodd"></path>
                        </svg>

                    </a>
                    <a>
                        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Weibo24">
                            <path fill="#FB6622"
                                d="M15.518 3.06c8.834-.854 7.395 7.732 7.394 7.731-.625 1.44-1.673.31-1.673.31.596-7.52-5.692-6.33-5.692-6.33-.898-1.067-.03-1.71-.03-1.71Zm4.13 6.985c-.66 1.01-1.376.126-1.375.126.205-3.179-2.396-2.598-2.396-2.598-.72-.765-.091-1.346-.091-1.346 4.882-.55 3.863 3.818 3.863 3.818ZM5.318 7.52s4.615-3.86 6.443-1.328c0 0 .662 1.08-.111 2.797.003-.003 3.723-1.96 5.408.16 0 0 .848 1.094-.191 2.648 0 0 2.918-.099 2.918 2.715 0 2.811-4.104 6.44-9.315 6.44-5.214 0-8.026-2.092-8.596-3.102 0 0-3.475-4.495 3.444-10.33Zm10.448 7.792s.232-4.41-5.71-4.207c-6.652.231-6.58 4.654-6.58 4.654.022.39.098 3.713 5.843 3.713 5.98 0 6.447-4.16 6.447-4.16Zm-9.882.86s-.06-3.632 3.804-3.56c3.412.06 3.206 3.164 3.206 3.164s-.026 2.98-3.684 2.98c-3.288 0-3.326-2.584-3.326-2.584Zm2.528 1.037c.672 0 1.212-.447 1.212-.998 0-.55-.543-.998-1.212-.998-.672 0-1.215.447-1.215.998 0 .551.546.998 1.215.998Z"
                                clip-rule="evenodd"></path>
                        </svg>

                    </a>
                </div>
            </div>
            <div class="login-tip">
                <div class="tip-left">
                    开通机构号
                </div>
                <div class="tip-right">
                    下载知乎APP
                </div>
            </div>
        </div>

    </div>
</body>

</html>